<template>
	<view class="verification">
		<!-- S 顶部导航 -->
		<sol-navbar></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 中间信息 -->
		<view class="verification_box">
			<view class="verification_title">
				{{state ? '填写验证码' : '验证手机' }}
			</view>

			<!-- 填写验证码 -->
			<view class="verification_code" v-if="state">
				<input class="verification_code--item" type="number" :maxlength="1" @input="fnCodeInput($event, 0)"
					:focus="code.focus == 0" v-model="codeValue[0]" />
				<input class="verification_code--item" type="number" :maxlength="1" @input="fnCodeInput($event, 1)"
					:focus="code.focus == 1" v-model="codeValue[1]" />
				<input class="verification_code--item" type="number" :maxlength="1" @input="fnCodeInput($event, 2)"
					:focus="code.focus == 2" v-model="codeValue[2]" />
				<input class="verification_code--item" type="number" :maxlength="1" @input="fnCodeInput($event, 3)"
					:focus="code.focus == 3" v-model="codeValue[3]" />
			</view>
			<!-- E 填写验证码 -->

			<!-- S 验证手机 -->
			<input class="verification_phone" type="number" placeholder="输入号码" :maxlength="11" v-model="phone" v-else />
			<!-- E 验证手机 -->

			<!-- S 下一步按钮 -->
			<button class="verification_btn" :class="{'verification_btn--disabled' : calcCodeInput }"
				:disabled="calcCodeInput" @click="state ? fnCodeSubmit() : fnCodeSend()" type="default">
				<image class="verification_btn--icon"
					:src="state ? '/static/icon-login/icon_allow.png':'/static/icon-login/icon_arrow_right.png'"
					mode="scaleToFill">
				</image>
			</button>
			<!-- E 下一步按钮 -->

		</view>
		<!-- E 中间信息 -->

		<!-- S 底部信息 -->
		<view class="verification_footer safe-area-inset-bottom">
			<text>根据相关法律要求</text>
			<text>完成手机号码验证才能使用完整服务</text>
		</view>
		<!-- E 底部信息 -->
	</view>
</template>

<script>
	export default {
		name: "Verification",
		data() {
			return {
				// 显示状态 0验证手机 1验证码
				state: 0,
				// 验证手机号码
				phone: '',
				// 填写验证码
				code: {
					value: '----',
					focus: 0,
				},
				// 验证码绑定值，用于清除
				codeValue: ["", "", "", ""]
			};
		},
		computed: {
			/// 验证码填入完整
			calcCodeInput() {
				return this.code.value.indexOf('-') != -1 && this.state == 1;
			}
		},
		methods: {
			/// 填写验证码
			fnCodeInput(event, index) {
				let value = event.detail.value;
				let codeArr = this.code.value.split("");
				this.code.focus = index;
				if (value) {
					codeArr[index] = value;
					this.code.value = codeArr.join("");
					if (codeArr[index + 1] == '-') {
						this.code.focus = index + 1;
					} else {
						let indexFocus = codeArr.indexOf('-');
						if (indexFocus != -1) {
							this.code.focus = indexFocus;
						}
					}
				} else {
					codeArr[index] = '-';
					this.code.value = codeArr.join("");
					if (codeArr[index - 1] == '-') {
						this.code.focus = index - 1;
					}
				}
			},
			/// 获取验证码
			fnCodeSend() {
				this.$log(this.$options.name, this.phone)
				if (this.phone == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: "请输入手机号码"
					});
					return;
				}
				if (this.phone.indexOf('1') != 0 || this.phone.length < 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: "无效手机号码"
					});
					return;
				}

				this.state = 1;
			},
			/// 提交验证码
			fnCodeSubmit() {
				this.$log(this.$options.name, this.code, this.codeValue)
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				if (this.code.value == '1234') {
					this.$store.commit('setVuexStore', {
						name: 'vuex_form_data.isTourist',
						value: false
					})
					uni.switchTab({
						url: '/pages/tabbar/home/home'
					});
					uni.hideLoading();
					return;
				}

				if (this.code.value == '2345') {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: "验证码已失效"
					})
					this.code = {
						value: '----',
						focus: 0,
					}
					this.codeValue = ["", "", "", ""];
					this.state = 0;
					return;
				}

				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: "请输入正确验证码"
				})
				this.code = {
					value: '----',
					focus: 0,
				}
				this.codeValue = ["", "", "", ""];
				this.state = 1;
			}
		}
	}
</script>

<style lang="scss">
	.verification {
		height: 100vh;
		background-color: $--color-background;

		&_box {
			position: absolute;
			top: 240rpx;
			left: 0;
			right: 0;
			width: auto;
		}

		&_title {
			font-size: 48rpx;
			font-weight: bold;
			color: $--color-text-assist-3;
			text-align: center;
			letter-spacing: 8rpx;
		}

		&_phone {
			width: 500rpx;
			height: 90rpx;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 4rpx;
			color: $--color-text;
			border-radius: 24rpx;
			background-color: $--color-block;
			margin: 0 auto;
			text-align: center;
			margin-top: 36rpx;
			margin-bottom: 72rpx;
		}

		&_code {
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			width: 500rpx;
			margin-top: 36rpx;
			margin-bottom: 72rpx;

			&--item {
				width: 90rpx;
				height: 90rpx;
				border-radius: 24rpx;
				background-color: $--color-block;
				font-size: 32rpx;
				font-weight: bold;
				color: $--color-text;
				text-align: center;
			}
		}

		&_btn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: none;
			background-color: #607d8b !important;
			overflow: hidden;
			padding: 0;
			line-height: 125rpx;

			&--icon {
				width: 56rpx;
				height: 56rpx;
			}

			&--disabled {
				background-color: $--color-block !important;
			}
		}

		&_footer {
			position: absolute;
			bottom: 32rpx;
			left: 0;
			right: 0;
			width: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: normal;
			color: $--color-text-assist-1;
			line-height: 60rpx;
			letter-spacing: 4rpx;
		}
	}
</style>
